﻿
function InitializeAccordion(element, displayTabNumber) {
    
    var counter = 1;
    var accordionContainerId = $(element).attr("id");

    $("#" + accordionContainerId + " .header-accordion").each(function () {

        $(this).prepend('<span class="close accordion-icon"></span>');

        if (counter != displayTabNumber) {
            $(this).next().css("display", "none");

        }

        if (counter == displayTabNumber) {

            $(this).children().each(function () {
       

                if ($(this).attr("class").search(/close/i) != -1 && $(this).attr("class") != "") {

                    $(this).removeClass("close");
                    $(this).addClass("collapse");

                }
            });

            $(this).next().css("display", "block");
            $(this).next().addClass("collapse-tab");
        }

        counter++;

        $(this).bind('click', function () {
            return CollapseAndHideTab(this, element);

        }); //end click event handler

    });

    //if displayTabNumber is greater than  the total elements then by default first element will be displayed
    if (counter < displayTabNumber) {

        var headerList = $("#" + accordionContainerId + " .header-accordion");
        var firstElement = $(headerList)[0];
        
        $(firstElement).next().css("display", "block");
        $(firstElement).next().addClass("collapse-tab");

        $(firstElement).children().each(function () {

            if ($(this).attr("class").search(/close/i) != -1 && $(this).attr("class") != "") {

                $(this).removeClass("close");
                $(this).addClass("collapse");

            }

        });
        
    }

} //end InitializeAccordion

function CollapseAndHideTab(element, containerElement) {
    var containerElementId = $(containerElement).attr("id");


    //We clicked a elemet which already collapsed. So we don't need
    //to do any action
    if ($(element).next().attr("class").search(/collapse-tab/i) != -1) 
    {
        $(element).next().slideUp(200);
        //toggle the icon-image
        $(element).children().each(function () {

            if ($(this).attr("class").search(/collapse/i) != -1 && $(this).attr("class") != "") {
                $(this).removeClass("collapse");
                $(this).addClass("close");
            }
        });
        $(element).next().removeClass("collapse-tab");
        return false;
    }

    //======hide currently collapse tab=======================
    //========================================================

    $("#" + containerElementId + " .collapse-tab").slideUp(200);

    var headerElem = $("#" + containerElementId + " .collapse-tab").prev();

    //toggle the icon-image

    $(headerElem).children().each(function () {

        if ($(this).attr("class").search(/collapse/i) != -1 && $(this).attr("class") != "") {
            $(this).removeClass("collapse");
            $(this).addClass("close");
        }


    });

    //all task done using .collapse-tab now remove it
    $("#" + containerElementId + " .collapse-tab").removeClass("collapse-tab");

    //========================================================


    //============show currently clicked tab========================
    //==============================================================
    $(element).next().addClass("collapse-tab");
    $(element).next().slideDown(200);
    //toggle the icon-image
    $(element).children().each(function () {

        if ($(this).attr("class").search(/close/i) != -1 && $(this).attr("class") != "") {
            $(this).removeClass("close");
            $(this).addClass("collapse");
        }
    });
    //==============================================================

    return false;

}